<script setup>
import {onMounted, ref} from "vue";
import {getComputerProfit} from "@/api/computer.js";
import * as echarts from "echarts";
onMounted(()=>{
  getProfit()
})
//电脑每日收益部分
const dailyProfit = ref([])
let myChartComputer = ref();
let profitComputer = ref()
const getProfit = async () => {
  const result = await getComputerProfit()
  dailyProfit.value = result.date.map(item => ({
    ...item,
    formattedDate: formatDate(item.date) // 添加格式化后的日期
  }));
  // dailyProfit.value = result.date
  console.log("vvvvvvvvvvvvvvvvvvv")
  console.log(dailyProfit.value)

  // 初始化图表，确保数据获取完成后再调用
  initComputerChart();
}
// 日期格式化函数
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const month = date.getMonth() + 1; // 月份从0开始计数，故需要加1
  const day = date.getDate();
  return `${month}-${day}`;
};
const initComputerChart = () => {
  myChartComputer.value = echarts.init(profitComputer.value);
  // 从 dailyProfit 获取 totalProfit 数据
  const dates = dailyProfit.value.map(item => item.formattedDate);
  const profits = dailyProfit.value.map(item => item.totalProfit);
  const optionComputer = {
    title: {
      text: '电脑每日收入'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: dates,
      name: '日期'
    },
    yAxis: {
      type: 'value',
      name: '销售额',
      min: 0,
      max:500
    },
    series: [{
      data:  profits,
      type: 'line',
      name: '销售额',
      label: {
        show: true, // 显示节点的数值标签
        position: 'top'
      },
    }]

  };
  myChartComputer.value.setOption(optionComputer);
};
</script>

<template>
  <div ref="profitComputer" style="width: 400px;height: 300px">

  </div>
</template>

<style scoped>

</style>